{%  extends "master.html" %}

{% block title %}Quiz{% endblock %}
{% block body %}
<div class="ui-widget ui-widget-content ui-corner-all" id="quiz">
    {% if items %}
    <table>
        <tbody>
        {% for item in items %}
            <tr>
                <td><button data-key="{{ item.spelling_key }}" data-index="0">{{ item.spelling }}</button></td>
                <td><button data-key="{{ item.translation_key }}" data-index="1">{{ item.translation }}</button></td>
            </tr>
        {% endfor %}
        </tbody>
    </table>
    {% else %}
    <p>You haven't added any words yet.</p>
    {% endif %}
    <a class="button" href="/list-words">Back</a>
</div>
<script type="text/javascript">
    $(function () {
        var groupOffset = 0;
        var groupLength = +("{{ group_len }}");

        var items = $("#quiz tr").hide();
        var group = items.slice(groupOffset, groupOffset + groupLength).show();

        var buttons = [];
        var statistics = {};

        items.find("button").click(function () {

            var button = $(this).button("disable");
            var previousButton = buttons.pop();

            if (previousButton) {
                if (previousButton.data("index") == button.data("index")) {
                    previousButton.button("enable").removeClass("ui-state-hover").removeClass("ui-state-active");
                } else {
                    buttons.push(previousButton)
                }
            }
            buttons.push(button.addClass("ui-state-active"));

            if (buttons.length == 2) {
                var result = buttons[0].data("key") == buttons[1].data("key") ? 1 : -1;
                var keyIndex = buttons[1].data("index") == 1 ? 0 : 1;
                var key = buttons[keyIndex].data("key");
                statistics[key] = (statistics[key] || 0) + result;
                if (result > 0) {
                    buttons[0].removeClass("ui-state-active");
                    buttons[1].removeClass("ui-state-active");
                    buttons = [];
                    if (!group.find("button").not(".ui-state-disabled").length) {
                        group.hide();
                        groupOffset += groupLength;
                        group = items.slice(groupOffset, groupOffset + groupLength).show();
                        if (!group.length) {
                            var keys = "";
                            var k;
                            for (k in statistics) {
                                if (statistics.hasOwnProperty(k)) {
                                    if (keys.length) {
                                        keys += ";";
                                    }
                                    keys += k;
                                }
                            }
                            statistics.keys = keys;
                            $.post("/quiz", statistics, function () {
                                location.reload();
                            });
                        }
                    }
                } else {
                    buttons.pop().button("enable").removeClass("ui-state-hover").removeClass("ui-state-active");
                }
            }
        });
    });
</script>
{% endblock %}